<!DOCTYPE html><!-- <!DOCTYPE> 文档类型声明，告诉浏览器使用哪种HTML版本来显示网页这句代码是指: 当前页面采取的是html5版本显示网页 -->
<!-- 
	HBuilder X 快捷操作	
	https://blog.csdn.net/youhoa/article/details/103589504
	
	H5(html5)入门教程
	https://blog.csdn.net/DAIYA_JIE/article/details/126806982
 -->
<html lang="en"><!-- en定义为英语 , zh-CN定义为中文 -->
	<head>
		<!-- 在<head>标签内，可以通过<meta>标签的charest属性来规定HTML文档应该使用哪种字符编码。charest常用的值有：GB2312、BIG5、GBK、UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家用到的字符 -->
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 
			基本标签
			<h1>~<h6>标题
			<p></p> 段落
			<br/>换行
			<strong></strong>或<b></b>加粗
			<em></em> 或<i></i>倾斜
			<del></del> 或<s></s>删除
			<ins></ins> 或<u></u>下划线
			<img></img>图像标签
		 -->
		<h1>标题h1</h1><!-- 字号最大 -->
		<h2>标题h2</h2>
		<h3 id="one">介绍详情</h3>
		<h6>标题h6</h6><!-- 字号最小 -->
		<p>
			段落p ， 在<head>标签内，可以通过
				<meta>
				标签的charest属性来规定HTML文档应该使用哪种字符编码。charest常用的值有：GB2312、BIG5、GBK、UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家用到的字符
		</p>
		<p>
			段落p ， 在<head>标签内，可以通过
				<meta>
				标签的charest属性来规定HTML文档应该使用哪种字符编码。charest常用的值有：GB2312、BIG5、GBK、UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家用到的字符
		</p>

		<strong>使用strong加粗文字</strong><br />
		<b>使用 b 标签对文字进行加粗</b><br />
		<em>使用 em 标签让文字倾斜</em><br />
		<i>使用 i 标签让文字倾斜</i><br />
		<del>使用 del 标签 删除</del><br />
		<img src="../images/img01.png" /><br />
		<img src="../images/img02.png" title="img属性" width="800px" height="300px" /><br />

		<img src="../images/img02.png" title="img属性" width="auto" height="auto" /><br />

		<!-- 
			链接标签<a></a>
		 -->

		<a href="https://www.baidu.com/" target="_self">在当前窗口打开 百度 链接</a><br />
		<a href="https://www.baidu.com/" target="_blank">在新窗口打开 百度 链接</a><br />
		<a href="#">空链接</a><br />
		<a href="https://www.baidu.com/" target="_blank"><img src="../images/baidu.png" /></a><br />

		<!--  锚点链接 -->
		<a href="#one">介绍</a><!-- 跳转到  <h3 id="one">介绍详情</h3> -->
		<br />
		<br />
		<h3>表格标签table</h3>
		<!-- 
			 表格标签table
			 常用表格标签
			表格标签<table></table>，表示一整个表格
			头标签<th></th>，表格的头部，第一行，内容会加粗，加黑，居中
			行标签<tr><tr/>，表格的一行
			单元格标签<td></td>，表格的一个单元格
			
			
			tr标签的属性
			align：表示水平对齐 取值：left（默认）
			valign垂直对齐 取值：top顶部 middle中间 bottom底部
			bgcolor背景颜色：
			background背景图片
			
			td标签的属性
			常用属性：align、valign
			
		 -->
		<table align="center" border="1">
			<tr>
				<th>排名</th>
				<th>关键字</th>
				<th>趋势</th>
				<th>今日搜索</th>
				<th>最近七日</th>
				<th>相关链接</th>
			</tr>

			<tr align="center">
				<td>1</td>
				<td>前端1</td>
				<td><img src="../images/icon_arrow_down.webp" width="50" /></td>
				<td>500</td>
				<td>3000</td>
				<td><a href="https://www.baidu.com/" target="_blank">百度一下</a></td>
			</tr>

			<tr align="center">
				<td>2</td>
				<td>前端2</td>
				<td><img src="../images/icon_arrow_down.webp" width="50" /></td>
				<td>500</td>
				<td>3000</td>
				<td><a href="https://www.baidu.com/" target="_blank">百度一下</a></td>
			</tr>

			<tr align="center">
				<td>3</td>
				<td>前端3</td>
				<td><img src="../images/icon_arrow_down.webp" width="50" /></td>
				<td>500</td>
				<td>3000</td>
				<td><a href="https://www.baidu.com/" target="_blank">百度一下</a></td>
			</tr>

		</table>

		<!-- 
			合并单元格
			rowspan =“合并单元格的个数 ” 跨行合并
			colspan=“合并单元格的个数 ” 跨列合并
		 -->

		<br />
		<table width="600" height="500" align="center" border="2" align="centenr">
			<tr align="center">
				<td>r1_1</td>
				<td colspan="2">r1_2</td>
				<td>r1_3</td>
			</tr>
			<tr align="center">
				<td rowspan="2">r2_1</td>
				<td>r2_2</td>
				<td>r2_3</td>
				<td>r2_4</td>
			</tr>

			<tr align="center">
				<td>r3_1</td>
				<td>r3_2</td>
				<td>r3_3</td>
			</tr>

		</table>

		<!-- 
			列表标签label
			
			无序列表ul
				无序列表的各个列表项之间没有顺序级别之分
				<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签后缀文字的做法是不被允许的
				<li></li>之间相当于一个容器，可以容纳所有元素
				type属性：设置列表的符号标记、取值：disc实心圆（默认）、circle空心圆、square正方形、none不显示项目符号
			
			有序列表ol
				有序列表的各个列表项之间没有顺序级别之分
				<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签后缀文字的做法是不被允许的
				<li></li>之间相当于一个容器，可以容纳所有元素
				默认使用阿拉伯数字、从1开始标记，可以通过属性进行修改
				5.type属性：设置列表的符号标记、取值；数字1（默认）、字母（a或A）、罗马数字(i或I)
				6.start属性：设置起始值，值必须是数字

			自定义列表dl
				1.<dl></dl>里面只能包<dt><dd>。
				2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
			
			
		 -->

		<br />
		<h4>水果</h4>
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>梨</li>
		</ul>

		<h4>手机</h4>
		<ol type="1">
			<li>华为</li>
			<li>小米</li>
		</ol>

		<dl>
			<dt>关于我们</dt>
			<dd>联系方式</dd>
			<dd>线下门店</dd>
			<dd>商务合作</dd>
		</dl>
		<br />

		<!-- 
			 表单标签form
			
			 input 标签的type属性
			 
			 表单域：
			 
			 是一个包含表单元素的区域
			 
			 在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递
			 
			 <form> 会把它范围内的表单元素信息提交给服务器
			 
			 属性	属性值	作用
			 action	提交至后台的url地址	用于指定接收并处理表单数据的服务器程序的url地址
			 method	get/post	用于设置表单数据的提交方式，其取值为get或post
			 name	表单域名称	用于指定表单的名称，以区分同一个页面中的多个表单域
			
			 原文链接：https://blog.csdn.net/qq_52357217/article/details/120092493
			 
		 -->

		

		<form>
			用户名：<input type="text" name="username" placeholder="请输入用户" /><br />
			密码：<input type="password" name="pwd" /><br />
			性别：男<input type="radio" name="sex" value="男" /> 女<input type="radio" name="sex" value="女" /><br />
			爱好：吃饭<input type="checkbox" name="hobby" value="吃饭" /> 睡觉<input type="checkbox" name="hobby"
				value="睡觉" /><br />

			<input type="submit" value="提交" /> <input type="reset" value="重置" /> <input type="button" value="获取验证码" />
			<input type="file" />
		</form>

		<br />

		<form>
			用户名：<input type="text" name="username" placeholder="请输入用户" maxlength="10" /><br />
			密码：<input type="password" name="pwd" /><br />


			<!-- radio 必须由相同的name值才可以实现多选一 -->
			性别：男<input type="radio" name="sex" value="男" id="man" /> 女<input type="radio" name="sex" value="女"
				id="girl" /><br />


			<!-- 
				label标签
				点击label内的文本时，就会选中
			 -->
			性别：<input type="radio" name="sex" id="man2" /> <label for="man2">男</label> <input type="radio" name="sex"
				id="woman2" /><label for="woman2">女</label><br />


			爱好：吃饭<input type="checkbox" name="hobby" value="吃饭" checked="checked" /> 睡觉<input type="checkbox"
				name="hobby" value="睡觉" />
		</form>

		<br />


		<!-- 
		 
				select 下拉表单
				1.<select>中至少包含一对
				2.在<option>中定义select="selected"时，当前项即为默认选中项。
				3.<option value="none" selected disabled hidden>请选择选项</option> 不出现在下拉列表中，但默认显示
			
		 -->

		<select name="" id="">
			<option value="none" selected disabled hidden>--请选择城市--</option>
			<option value="北京">北京</option>
			<!-- <option value="上海" selected="selected">上海</option> -->
			<option value="上海">上海</option>
			<option value="深圳">深圳</option>
			<option value="杭州">杭州</option>
		</select>

		<br />
		<h3>青春不常在</h3>
		<form action="" method="post" >
			 <table>
				 <tr>
					 <td>性别</td>
					 <td>
						 <input type="radio" name="sex" value="man" id="man3" checked="checked"/><label for="man3">男</label> 
						 <input type="radio" name="sex" value="woman" id="woman3"/><label for="woman3">女</label>
					 </td>
				 </tr>
				 <tr>
					 <td>生日</td>
					 <td>
						 <select name="" id="">
							 <option value="none" selected disabled hidden>--请选择年--</option>
							 <option value="2023" id="2023">2023</option>
							 <option value="2022" id="2022">2022</option>
							 <option value="2021" id="2021">2021</option>
							 <option value="2020" id="2020">2020</option>
							 <option value="2019" id="2019">2019</option>
						 </select>
						 <select>
							 <option value="none" selected disabled hidden>--请选择月--</option>
							 <option value="12" id="12">12</option>
							 <option value="11" id="11">11</option>
							 <option value="10" id="10">10</option>
							 <option value="9" id="9">9</option>
							 <option value="8" id="8">8</option>
							 <option value="7" id="7">7</option>
							 <option value="6" id="6">6</option>
						 </select>
						 <select>
							 <option value="none" selected disabled hidden>--请选择日--</option>
							 <option value="31" id="31">31</option>
							 <option value="30" id="30">30</option>
							 <option value="29" id="29">29</option>
							 <option value="28" id="28">28</option>
							 <option value="27" id="27">27</option>
							 <option value="26" id="26">26</option>
						 </select>
					 </td>
				 </tr>
				 
				 <tr>
					 <td>所在地区</td>
					 <td>
						 <input type="text" id="address"/>
					 </td>
				 </tr>
				 <tr>
					 <td>婚姻状况</td>
					 <td>
						 <input type="radio" name="married" id="had_married" checked="checked"/><label for="had_married">已婚</label>
						 <input type="radio" name="married" id="no_married" /><label for="no_married">未婚</label>
					 </td>
				 </tr>
				 <tr>
					 <td>喜欢的类型</td>
					 <td>
						 <input type="checkbox" name="like" id="youya"/>优雅 
						 <input type="checkbox" name="like" id="wumei"/> 妩媚
						 <input type="checkbox" name="like" id="all"/> 都喜欢
					 </td>
				 </tr>
				 <tr>
					 <td>自我介绍</td>
					 <td><input type="text" value="自我介绍"/></td>
				 </tr>
				 <tr>
					 <td rowspan="2"></td>
					 <td rowspan="2">
						 <input type="submit" value="免费注册"/><br />
						 <input type="checkbox" checked="checked" value=""/>我同意注册条款和会员加入标准<br />
						 <a href="#">我是会员，立即登录</a><br />
						 <h3>我承诺</h3>
						 <ul>
							 <li>已成年</li>
							 <li>无不良行为</li>
						 </ul>
					 </td>
				 </tr>
			 </table>
		 </form>

	</body>
</html>